<template>
  <div>
    <!-- 短文资讯的横杠标题 -->
    <div class="information_type">短文资讯</div>
    <!-- 短文资讯的内容遍历 -->
    <div class="short-information-list">
      <div v-for="item in list[0].list" :key="item.id">
        <short-information
          :title="item.title"
          :author="item.author"
          :createTime="item.createTime"
          :sampleGraph="item.sampleGraph"
        />
      </div>
    </div>
    <!-- 视频资讯的横杠标题 -->
    <div class="information_type">视频资讯</div>
    <!-- 视频资讯的内容遍历 -->
    <div class="video-information-list">
      <div v-for="item in list[1].list" :key="item.id">
        <video-information
          :title="item.title"
          :author="item.author"
          :synopsis="item.synopsis"
        />
      </div>
    </div>
  </div>
</template>

<script>
//引入数据
import list from "@/json/information.json";

//引入组件
import ShortInformation from "@/components/body/information/ShortInformation.vue";
import VideoInformation from "@/components/body/information/VideoInformation.vue";

export default {
  name: "Information",
  data() {
    return {
      list: list,
      author: "wxb"
    };
  },
  components: {
    ShortInformation,
    VideoInformation
  }
};
</script>
 
<style>
.information_type {
  width: 100%;
  background-color: #00b0f0;
  color: white;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.short-information-list {
  /* padding: 20px; */
}
.video-information-list {
  /* float: left; */
  /* text-align: center; */
  /* background-color: grey; */
}
</style>